<template>
  <van-swipe
    id="banner-swipe"
    ref="bannerSwiper"
    :autoplay="3000"
    :initial-swipe="initIndex"
    :show-indicators="false"
    @change="onSwipeChange"
  >
    <van-swipe-item
      v-for="(banner, index) in bannerList"
      :key="banner.id"
      @click="go2BannerLanding(banner, index)"
    >
      <img :src="resizeImg(banner.imgUrl)" alt="" />
    </van-swipe-item>
    <div v-if="showIndicator" slot="indicator" class="custom-indicator">
      {{ `${curIndex + 1}/${total}` }}
    </div>
  </van-swipe>
</template>

<script>
import { goLink, http2https, formatImgUrl } from '@/utils/util';

export default {
  name: 'bannerList',
  props: {
    bannerList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      initIndex: 0,
      curIndex: 0,
      isStopExpose: false
    };
  },
  computed: {
    total() {
      return this.bannerList.length;
    },
    showIndicator() {
      return this.bannerList.length > 1;
    }
  },
  activated() {
    this.initIndex = this.curIndex;
    // this.curIndex = 0;
    // this.goToSwiper(0);
    // console.error('banner-activated====', this.curIndex);
  },
  methods: {
    goToSwiper(index) {
      this.$refs.bannerSwiper.swipeTo(index);
    },
    http2httpsLocal(url) {
      return http2https(url);
    },
    resizeImg(url) {
      return formatImgUrl(url, 375, null);
    },
    onSwipeChange(index) {
      this.curIndex = index;
      if (this.isStopExpose) return;
      this.isStopExpose = index === this.bannerList.length - 1;
      const bannerWrapper = document.getElementById('banner-swipe');
      if (bannerWrapper && bannerWrapper.getBoundingClientRect().top < 0) {
        return;
      }
    },
    go2BannerLanding(banner) {
      const { name, linkUrl, activityId } = banner || {};
      let { hrefType } = banner || {};
      hrefType = hrefType || 0;
      if (!linkUrl) {
        return;
      }
      switch (hrefType) {
        case 0: // 落地页
          goLink(linkUrl, (params, path) => {
            this.$router
              .push({
                path,
                query: {
                  ...params,
                  shopId: this.$route.query.shopId
                }
              })
              .catch(err => {
                console.log(err);
              });
          });
          break;
        case 1: // 图片类型
          this.$router.push({
            path: 'banner-image',
            query: {
              name,
              imgUrl: linkUrl
            }
          });
          break;
        case 2: // 活动类型
          this.$router.push({
            path: 'brand',
            query: {
              activityNo: linkUrl
            }
          });
          break;
        case 3: // 商品类型
          this.$router.push({
            path: 'productDetail',
            query: {
              productId: linkUrl,
              shopId: this.$route.query.shopId,
              activityNo: activityId
            }
          });
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#banner-swipe {
  position: relative;
  width: 355px;
  height: 114px;
  margin: 0 auto 10px;
  border-radius: 6px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }
  .custom-indicator {
    position: absolute;
    right: 10px;
    bottom: 8px;
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
  }
}
</style>
